<html>
<head>
  <style type="text/css" media="screen">
    body
    {
      margin:0;
      padding:0;
      overflow:hidden;
      color:white;
	  opacity:.99;
      background-color:transparent;
      border:none;
      font-family:arial,sans-serif;
    }
    img 
    { 
      border:none;
    }
    #body
    {
      opacity:.75;
      padding:10px;
      height:60px;
      background-color:black;
      -webkit-border-radius:6px;
      position:relative;
    }
    #content
    {
      position:absolute;
      top:8px;
      left:70px;
      right:10px;
      opacity:.80;
    }
    #content a
    {
      color:#fff;
    }
    #message
    {
      font-size:13px;
    }
    #title
    {
      font-weight:bold;
      font-size:14px;
      margin-bottom:7px;
    }
    #image
    {
      position:absolute;
      top:15px;
      left:12px;
    }
  </style>
  <script>
	function runCallback ()
	{
		if (Titanium.UI.currentWindow.callback) {
			Titanium.UI.currentWindow.callback();
		}
	}
  </script>
</head>
<body onclick="runCallback()">
  <div id="body">
    <div id="image"><img id="notification_icon"/></div>
    <div id="content">
      <div id="title"></div>
      <div id="message"></div>
    </div>
  </div>
  <script>
      // fix opacity rendering issue in chrome (for now)
      // 
      //if (Titanium.platform == "win32") {
      //  $("#content").css("opacity", "1");
      //  $("body").css("opacity", "1");
      //}
      
      function $(id) { return document.getElementById(id); }
      
      function queryString(uri,params)
      {
        idx = uri.indexOf('?');
        params = params || {};
        if (idx > 0)
        {
          var qs = uri.substring(idx+1);
          var tokens = qs.split('&');
          for (var i = 0; i < tokens.length; i++) {
            var token = tokens[i];
            var e = token.split('=');
            var v = decodeURIComponent(e[1]||'');
            var k = decodeURIComponent(e[0]);
            params[k]=v;
          }
        }
        return params;
      }
      // get config parameters for app from the URI of the page
      var qs = queryString(window.document.location.href);
      try
      {
        $("title").innerHTML = qs.title||'';
        $("message").innerHTML = qs.message||'';
        if (qs.icon)
        {
          $("content").style.left = '';
          var img = $('notification_icon');

          // for some reason a slash is appended to the URL
          // when retrieving it from the query string, just chop that sucker off
          // (it's causing the icon not to load correctly)
          if (qs.icon.substring(qs.icon.length-1) == "/") {
				qs.icon = qs.icon.substring(0, qs.icon.length-1);
          }

          img.src = qs.icon;
          img.style.visibility = 'visible';
          img.style.display = '';
          img.onerror = function() { img.style.visibility='hidden' };
        }
        else
        {
          $("notification_icon").display = 'none';
          $("content").left = '10px';
        }
      }
      catch(E)
      {
        //FIXME:
        alert('Error displaying notification window: '+E+", line: "+E.line);
      }
  </script>
</body>
</html>

